<template>
    <div class="leftTop_warp">
        <div class="leftTop_warp_header">
            <el-button v-for="item in btnlist"
                :type="activeRow && activeRow.datakey === item.datakey ? 'isactiveBtn' : ''" :key="item.datakey"
                size="small" @click="btnClick(item)">{{ item.label }}</el-button>
        </div>

        <div class="leftTop_warp_comend">
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '危险区'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '防治区'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '安置点'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '转移路线'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '山洪沟'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '公示牌'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '取水口'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '排污口'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '美丽河湖'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '示范河湖'" />
            <bar :chartData="chartData" v-if="chartData && activeRow && activeRow.value === '样板河湖'" />

        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { btn3, wxqdata } from '../data/dataconfig'
import { maxpieoption } from "../data/echarts"
import bar from "../../../components/echarts/bar.vue";
const btnlist = ref(btn3)
const activeRow = ref(null)
const chartData = ref(null)
const btnClick = (row) => {
    activeRow.value = row
    creatOption()
}
const creatOption = () => {
    let newbar = JSON.parse(JSON.stringify(maxpieoption))
    console.log(activeRow.value)
    if(activeRow.value.value == '危险区') {
        newbar.series[0].data = wxqdata

    }else if(activeRow.value.value == '防治区') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '安置点') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '转移路线') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '山洪沟') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '公示牌') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '取水口') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '排污口') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '美丽河湖') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '示范河湖') {
        newbar.series[0].data = wxqdata
    }else if(activeRow.value.value == '样板河湖') {
        newbar.series[0].data = wxqdata
    }
    console.log(newbar, 'newbarnewbar')
    chartData.value = newbar

}
onMounted(() => {
    nextTick(() => {
        btnClick(btnlist.value[0])
    })
})
</script>

<style lang="less" scoped>
.leftTop_warp {
    height: 100%;
    width: 100%;
}

.leftTop_warp_header {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.6rem;

    .el-button+.el-button {
        margin-left: 0;

    }

    .el-button {
        margin-right: 0.3rem;
        min-width: 2.8rem;
        background: rgba(0, 0, 0, 0);
        border: 0px;
        color: #fff;
        background-image: url(../../../assets/image/home/menu.png);
        background-size: cover;
        font-size: 0.8rem;
    }

    .el-button--isactiveBtn {
        background-image: url(../../../assets/image/home/menu-active.png);
        background-size: cover;
    }
}

.leftTop_warp_comend {
    height: calc(100% - 5.1rem);
}
</style>